<template>
	<view>
		<h2>新闻类别页面</h2>
		
		<view>
			遍历数组
		</view>
		
		<view v-for="(item, index) in list" :key="item.id">
			{{item}}
		</view>
		
		<view>
			遍历对象
		</view>
		
		<view v-for="(value, key, index) in person">
			{{index}}: {{key}} - {{value}}
		</view>
		
		<view>
			动态修改背景色1
			<view class="box" :class="{myBox: myBoxActive}" 
			:style="{backgroundColor: bgc}">
			</view>
			<br />
			动态修改背景色2
			<view class="box" :class="myBoxActive? 'myBox' :''" 
			:style="{backgroundColor: bgc}">
				
			</view>
			<button @click="changeColor">点击我修改颜色</button>
			<button @click="myBoxActive=!myBoxActive">点击我修改类选择器</button>
		</view>
		
		<view class="nav">
			<view :class="latestNavItemIndex == index ? 'active' : '' " class="nav-item" 
			v-for="(item, index) in navs"
			@click="latestNavItemIndex=index"
			>
				{{item.name}}
			</view>
		</view>
		<br />
		<view class="nav">
			<view :class="[latestNavItemIndex == index ? 'active' : '' ]" 
			class="nav-item" 
			v-for="(item, index) in navs"
			@click="latestNavItemIndex=index"
			>
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latestNavItemIndex: 0, // 记录最近一次点击过的导航菜单项的索引值
				navs: [
					{id: 1, name: '首页'},
					{id: 2, name: '介绍'},
					{id: 3, name: '教程'},
					{id: 4, name: '组件'}
				],
				list: [
					{id: '1', name: 'new1'},
					{id: '2', name: 'new2'},
					{id: '3', name: 'new3'}
				],
				person: {
					name: 'xhui',
					age: 18
				},
				bgc: '#ffe323',
				myBoxActive: false
			};
		},
		methods: {
			changeColor(){
				let hexString = '#';
				for (let i = 0; i < 6; i++) {
				  hexString += Math.floor(Math.random() * 16).toString(16).toUpperCase();
				}
				// console.log(this.bgc)
				this.bgc = hexString
			}
		}
	}
</script>

<style lang="scss">
.nav {
	display: flex;
	justify-content: space-around; // 相邻子元素的之间的间距相等，且两边都有距离
	// justify-content: space-between; // 相邻子元素的之间的间距相等
	align-items: center;
	background-color: #ccc;
	.nav-item {
		// width: 200rpx;
		// height: 200rpx;
		flex: 1; // 当前元素均分父元素的空间
		line-height: 90rpx;
		text-align: center;
		&.active { // & 代表当前选择器。所以：&.active → 当前类加上 .active 后缀
			background-color: #1aa034;
			color: white;
		}
	}
}
	
.box {
	width: 200rpx;
	height: 200rpx;
	background-color: pink;
	// border: 5rpx solid red;
}

.myBox {
	border: 5rpx solid red;
}
</style>
